<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>01初始化地图</title>
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<link href="css/common/ol.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/common/ol.js"></script>
		<script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
	</head>

	<script>
		var map_source = "wmts"; //地图的服务类型
		var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
		//map_url此处使用的是【Portable Basemap Server】作为地图服务
		var map_url = "http://localhost:8888/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
		//var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
		var map_zoom = 15; //初始化地图缩放级别
		var map_minZoom = 14; //地图最小缩放级别
		var map_maxZoom = 20; //地图最大缩放级别
		var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
		var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）

		$(document).ready(function() {
			var baseLayer = new ol.layer.Tile({
				opacity: 1.0,
				source: new ol.source.XYZ({
					url: map_url
				})
			});
			if(baseLayer) {
				// 初始地图对象
				var map = new ol.Map({
					layers: [baseLayer],
					loadTilesWhileAnimating: true,
					target: document.getElementById("map"),
					controls: ol.control.defaults({
						attributionOptions: ({
							collapsible: false
						})
					}),
					view: new ol.View({
						center: [map_x, map_y],
						zoom: map_zoom,
						minZoom: map_minZoom,
						maxZoom: map_maxZoom
					}),
					interactions: ol.interaction.defaults({
						doubleClickZoom: false
					})
				});
			}
		});
	</script>

	<body>
		<div id="map"></div>
	</body>

</html>